<template>
    <div class="quotation-table">
        <!-- 客户信息 -->
        <el-card class="customer-info">
            <template #header>
                <div class="card-header">客户信息</div>
            </template>
            <el-descriptions :column="2" border>
                <el-descriptions-item label="公司名称">{{ customerData.companyName }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{ customerData.contactPerson }}</el-descriptions-item>
                <el-descriptions-item label="联系方式">{{ customerData.contactInfo }}</el-descriptions-item>
                <el-descriptions-item label="报价日期">{{ customerData.quoteDate }}</el-descriptions-item>
                <el-descriptions-item label="需求描述" :span="2">
                    {{ customerData.requirementDescription }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <!-- 配置报价表格 -->
        <el-card class="quotation-info">
            <template #header>
                <div class="card-header">配置报价明细</div>
            </template>
            <el-table :data="configData.components" border>
                <el-table-column label="序号" type="index" width="60" />
                <el-table-column label="配件类型" prop="type" width="120" />
                <el-table-column label="型号规格" prop="model" />
                <el-table-column label="详细参数" prop="spec" />
                <el-table-column label="数量" prop="quantity" width="80" />
                <el-table-column label="单价" width="120">
                    <template #default="{ row }">¥{{ row.price.toFixed(2) }}</template>
                </el-table-column>
                <el-table-column label="总价" width="120">
                    <template #default="{ row }">
                        ¥{{ (row.price * row.quantity).toFixed(2) }}
                    </template>
                </el-table-column>
            </el-table>

            <div class="total-section">
                <div class="total-row">
                    <span class="label">合计金额：</span>
                    <span class="value">¥{{ configData.totalPrice.toFixed(2) }}</span>
                </div>
                <div class="total-row">
                    <span class="label">大写金额：</span>
                    <span class="value">{{ amountInWords }}</span>
                </div>
            </div>
        </el-card>

        <div class="action-buttons">
            <el-button @click="handlePrev">上一步</el-button>
            <el-button type="primary" @click="handleSave">保存报价单</el-button>
            <el-button type="success" @click="handlePrint">打印报价单</el-button>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
    configData: Object,
    customerData: Object
})

const emit = defineEmits(['prev', 'save'])

const amountInWords = computed(() => {
    // 这里应该实现数字转中文大写的逻辑
    return convertAmountToWords(props.configData.totalPrice)
})

const handlePrev = () => {
    emit('prev')
}

const handleSave = () => {
    const quotationData = {
        customer: props.customerData,
        configuration: props.configData,
        totalAmount: props.configData.totalPrice,
        quotationDate: new Date().toISOString()
    }
    emit('save', quotationData)
}

const handlePrint = () => {
    window.print()
}

const convertAmountToWords = (amount) => {
    // 简单的数字转中文大写实现
    const units = ['', '拾', '佰', '仟', '万']
    const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']

    // 这里应该是完整的转换逻辑，简化实现
    return '人民币' + amount.toFixed(2) + '元整'
}
</script>